<template>
  <div @click="showDrawer" class="button">
    {{ data.dataName }}
  </div>
  <a-drawer :width="968" v-model:open="open" placement="right" destroy-on-close>
    <template #title>
      <div style="display: flex; flex-wrap: nowrap; align-items: center">
        <span style="font-size: 24px; margin-right: 11px">
          <iconfont v-if="data.dataType === 'folder'" name="#icon-wenjianjia" />
          <iconfont v-else name="#icon-wenjian" />
        </span>
        <div
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
        >
          {{ data.dataName }}
        </div>
      </div>
    </template>
    <a-table />
  </a-drawer>
</template>
<script setup>
import { ref, toRef, watch } from 'vue'
import iconfont from '@/components/iconfont.vue'
import ATable from './table.vue'
import { useProvideContextRegistry } from './provide-context.js'
/**
 * 外部参数
 */
let props = defineProps({
  data: { type: Object, required: true },
})
/**
 * 抽屉相关
 */
let open = ref(false)
let showDrawer = () => {
  open.value = true
}

/**
 * 全局上下文定义
 */
//获取文件夹id
let data = toRef(props, 'data')
let id = toRef(data.value, 'dataId')
useProvideContextRegistry({
  groupId: props?.data?.id,
  categoryId: props?.data?.categoryId,
  createFolderDisabled: true,
})

// watch(open, () => {
//   if ((open.value = false)) {
//     // todo 关闭抽屉时清空groupId
//   }
// })
</script>
<style scoped lang="less">
.button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3d6d99;
  cursor: pointer;
}
</style>
